<template>
  <div>
    <!-- 注册会员弹窗 -->
    <el-dialog title="注册会员" :visible.sync="dialogVisible" width="90%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        size="mini"
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
        label-width="110px"
      >
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="姓名"
            prop="customerName"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.customerName"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="生日"
            prop="birthday"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-date-picker
              size="mini"
              style="width: 120px"
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="证件号"
            prop="custCertificateNo"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 220px"
              v-model="ruleForm.custCertificateNo"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="手机号"
            prop="contractPhoneOne"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.contractPhoneOne"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="证件类型"
            prop="idType"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.idType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in mold"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="证件有效期"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-date-picker
              size="mini"
              style="width: 120px"
              v-model="ruleForm.expired"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="职业" style="display: flex; margin: 0 15px 0 0">
            <el-input
              style="width: 120px"
              v-model="ruleForm.profession"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务" style="display: flex; margin: 0 15px 0 0">
            <el-input
              style="width: 120px"
              v-model="ruleForm.jobTitle"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="性格特征"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 220px"
              v-model="ruleForm.characterTraits"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="客户喜好"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.customerPreferences"
            ></el-input>
          </el-form-item>
          <el-form-item label="民族" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.nationality"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="汉族" value="汉族"></el-option>
              <el-option label="蒙古族" value="蒙古族"></el-option>
              <el-option label="回族" value="回族"></el-option>
              <el-option label="藏族" value="藏族"></el-option>
              <el-option label="维吾尔族" value="维吾尔族"></el-option>
              <el-option label="苗族" value="苗族"></el-option>
              <el-option label="壮族" value="壮族"></el-option>
              <el-option label="布依族" value="布依族"></el-option>
              <el-option label="朝鲜族" value="朝鲜族"></el-option>
              <el-option label="满族" value="满族"></el-option>
              <el-option label="彝族" value="彝族"></el-option>
              <el-option label="侗族" value="侗族"></el-option>
              <el-option label="瑶族" value="瑶族"></el-option>
              <el-option label="白族" value="白族"></el-option>
              <el-option label="土家族" value="土家族"></el-option>
              <el-option label="哈尼族" value="哈尼族"></el-option>
              <el-option label="哈萨克族" value="哈萨克族"></el-option>
              <el-option label="傣族" value="傣族"></el-option>
              <el-option label="黎族" value="黎族"></el-option>
              <el-option label="僳僳族" value="僳僳族"></el-option>
              <el-option label="佤族" value="佤族"></el-option>
              <el-option label="畲族" value="畲族"></el-option>
              <el-option label="回族" value="回族"></el-option>
              <el-option label="高山族" value="高山族"></el-option>
              <el-option label="拉祜族" value="拉祜族"></el-option>
              <el-option label="水族" value="水族"></el-option>
              <el-option label="东乡族" value="东乡族"></el-option>
              <el-option label="纳西族" value="纳西族"></el-option>
              <el-option label="景颇族" value="景颇族"></el-option>
              <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
              <el-option label="土族" value="土族"></el-option>
              <el-option label="达斡尔族" value="达斡尔族"></el-option>
              <el-option label="仫佬族" value="仫佬族"></el-option>
              <el-option label="羌族" value="羌族"></el-option>
              <el-option label="布朗族" value="布朗族"></el-option>
              <el-option label="撒拉族" value="撒拉族"></el-option>
              <el-option label="毛南族" value="毛南族"></el-option>
              <el-option label="仡佬族" value="仡佬族"></el-option>
              <el-option label="锡伯族" value="锡伯族"></el-option>
              <el-option label="阿昌族" value="阿昌族"></el-option>
              <el-option label="普米族" value="普米族"></el-option>
              <el-option label="塔吉克族" value="塔吉克族"></el-option>
              <el-option label="怒族" value="怒族"></el-option>
              <el-option label="乌孜别克族" value="乌孜别克族"></el-option>
              <el-option label="俄罗斯族" value="俄罗斯族"></el-option>
              <el-option label="鄂温克族" value="鄂温克族"></el-option>
              <el-option label="德昂族" value="德昂族"></el-option>
              <el-option label="保安族" value="保安族"></el-option>
              <el-option label="裕固族" value="裕固族"></el-option>
              <el-option label="京族" value="京族"></el-option>
              <el-option label="塔塔尔族" value="塔塔尔族"></el-option>
              <el-option label="独龙族" value="独龙族"></el-option>
              <el-option label="鄂伦春族" value="鄂伦春族"></el-option>
              <el-option label="赫哲族" value="赫哲族"></el-option>
              <el-option label="门巴族" value="门巴族"></el-option>
              <el-option label="珞巴族" value="珞巴族"></el-option>
              <el-option label="基诺族" value="基诺族"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="婚姻情况"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.maritalStatus"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="已婚" value="已婚"></el-option>
              <el-option label="未婚" value="未婚"></el-option>
              <el-option label="离异" value="离异"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="星座" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.constellation"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="白羊座" value="白羊座"></el-option>
              <el-option label="金牛座" value="金牛座"></el-option>
              <el-option label="双子座" value="双子座"></el-option>
              <el-option label="巨蟹座" value="巨蟹座"></el-option>
              <el-option label="狮子座" value="狮子座"></el-option>
              <el-option label="处女座" value="处女座"></el-option>
              <el-option label="天秤座" value="天秤座"></el-option>
              <el-option label="天蝎座" value="天蝎座"></el-option>
              <el-option label="射手座" value="射手座"></el-option>
              <el-option label="摩羯座" value="摩羯座"></el-option>
              <el-option label="水瓶座" value="水瓶座"></el-option>
              <el-option label="双鱼座" value="双鱼座"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生肖" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.chineseZodiac"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="子鼠" value="子鼠"></el-option>
              <el-option label="丑牛" value="丑牛"></el-option>
              <el-option label="寅虎" value="寅虎"></el-option>
              <el-option label="卯兔" value="卯兔"></el-option>
              <el-option label="辰龙" value="辰龙"></el-option>
              <el-option label="巳蛇" value="巳蛇"></el-option>
              <el-option label="午马" value="午马"></el-option>
              <el-option label="未羊" value="未羊"></el-option>
              <el-option label="申猴" value="申猴"></el-option>
              <el-option label="酉鸡" value="酉鸡"></el-option>
              <el-option label="戌狗" value="戌狗"></el-option>
              <el-option label="亥猪" value="亥猪"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="联系要求"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.contactRequest"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="无" value=""></el-option>
              <el-option
                label="不允许联系"
                value="contactNotAllowed"
              ></el-option>
              <el-option label="可以联系" value="CanBeContacted"></el-option>
              <el-option
                label="不要频繁联系"
                value="FrequentContact"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="通讯地址"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              type="textarea"
              :rows="1"
              style="width: 480px"
              v-model="ruleForm.mailingAddress"
            ></el-input>
          </el-form-item>
          <el-form-item label="微信" style="display: flex; margin: 0 15px 0 0">
            <el-input v-model="ruleForm.wechatId"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="语种" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.language"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="中文" value="中文"></el-option>
              <el-option label="英文" value="英文"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="国籍" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.countryCitizenship"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="中国" value="中国"></el-option>
              <el-option label="香港" value="香港"></el-option>
              <el-option label="外国" value="外国"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="会员等级"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.membershipLevel"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="体验会员" value="1"></el-option>
              <el-option label="白银会员" value="2"></el-option>
              <el-option label="黄金会员" value="3"></el-option>
              <el-option label="黑金会员" value="4"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="籍贯" style="display: flex; margin: 0 15px 0 0">
            <el-input
              type="textarea"
              :rows="1"
              style="width: 480px"
              v-model="ruleForm.hometown"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="现居城市"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              type="textarea"
              :rows="1"
              style="width: 300px"
              v-model="ruleForm.currentCity"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="性别"
            prop="customerSex"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.customerSex"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="血型" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.bloodType"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="A型" value="A型"></el-option>
              <el-option label="B型" value="B型"></el-option>
              <el-option label="AB型" value="AB型"></el-option>
              <el-option label="O型" value="O型"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="display: flex; margin: 0 15px 0 0">
            <el-input
              type="textarea"
              :rows="1"
              style="width: 300px"
              v-model="ruleForm.modifyReason"
            ></el-input>
          </el-form-item>
        </div>
        <div style="margin: 30px 0 0 45%">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
    <div class="table">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>查询条件</span>
        </div>
      </div>

      <el-form
        label-width="80px"
        :model="message"
        :inline="true"
        size="mini"
        class="el-form"
      >
        <div class="big_box">
          <el-form-item label="会员卡号">
            <el-input
              placeholder="查询时选填"
              v-model="message.cardCode"
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            ></el-input>
          </el-form-item>

          <el-form-item label="会员姓名">
            <el-input
              v-model="message.customerName"
              placeholder="查询时选填 注册时必填"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              placeholder="查询时选填 注册时必填"
              v-model="message.phoneOne"
              maxlength="11"
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            ></el-input>
          </el-form-item>

          <el-form-item label="证件号">
            <el-input
              placeholder="查询时选填 注册时必填"
              v-model="message.customerNo"
              maxlength="18"
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            ></el-input>
          </el-form-item>

          <div class="boxs">
            <el-form-item>
              <el-button
                type="primary"
                @click="getselectCustomerIdentify('message')"
                >会员查询</el-button
              >
              <el-button type="primary" @click="clearForm('message')"
                >重置</el-button
              >
              <el-button
                size="mini"
                @click="getregistermethod"
                type="primary"
                style="font-weight: bold"
                >&nbsp;&nbsp; 注册 &nbsp;&nbsp;</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div class="table">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>查询列表</span>
        </div>
      </div>

      <el-table
        border
        :data="list"
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        style="width: 90%"
      >
        <el-table-column prop="userName" label="姓名"> </el-table-column>
        <el-table-column prop="userSex" label="性别">
          <template slot-scope="scope">
            <template v-if="scope.row.userSex == 'female'">女</template>
            <template v-if="scope.row.userSex == 'male'">男</template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="成为会员时间">
        </el-table-column>
        <el-table-column prop="phoneOne" label="手机号1"> </el-table-column>
        <el-table-column prop="phoneTwo" label="手机号2"> </el-table-column>
      </el-table>
    </div>

    <template>
      <el-tabs v-model="activeName" class="tabsv">
        <el-tab-pane label="工单" name="first">
          <Workorder :message="message" ref="mychild1"></Workorder>
        </el-tab-pane>
        <el-tab-pane label="机票订单" name="second">
          <Flightorder :message="flightOrderBOS" ref="mychild2"></Flightorder>
        </el-tab-pane>
        <el-tab-pane label="酒店订单" name="third">
          <Hotelorder :message="hotelOrderBOS" ref="mychild3"></Hotelorder>
        </el-tab-pane>
        <el-tab-pane label="机票退改签" name="flightreturn">
          <Ticketrefund :message="flightChangeRefundOrderBOS" ref="mychild4" />
        </el-tab-pane>
        <el-tab-pane label="火车票订单" name="train">
          <Trainorder :message="trainOrderBOS" ref="mychild5" />
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
// import Workorder from '../orders/workorder.vue'
import Flightorder from "../orders/flightorder.vue";
import Hotelorder from "../orders/hotelorder.vue";
import Trainorder from "../orders/trainorder.vue";
import Workorder from "../orders/workorder.vue";
import Ticketrefund from "../orders/ticketrefund.vue";
export default {
  name: "",
  components: {
    Flightorder,
    Hotelorder,
    Trainorder,
    Workorder,
    Ticketrefund,
  },
  data() {
    return {
      // 证件类型
      mold: [
        {
          value: "ID_CARD",
          label: "身份证",
        },
        {
          value: "MILITARY_ID ",
          label: "军人证",
        },
        {
          value: "PASSPORT ",
          label: "护照",
        },
        {
          value: "MTPFHKAMR",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "MTPFTR ",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "RPFHKMATR ",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "PRICFF",
          label: "外国人永久居留身份证",
        },
        {
          value: "HKAMP",
          label: "港澳通行证",
        },
        {
          value: "ACCOUNT_BOOK",
          label: "户口本",
        },
        {
          value: "BIRTH_CERTIFICATE",
          label: "出生证明",
        },
        {
          value: "TAIWAN_PASS",
          label: "台湾通行证",
        },
      ],
      activeName: "first",
      message: {
        phoneTwo: "",
        phoneOne: "",
        balance: "",
        date: "",
        star: "",
        integral: "",
        record: "",
        sex: "",
        customerName: "",
        availableValue: "",
        customerNo: "",
        cardType: "",
        cardCode: "",
        special: "",
        birthday: "",
        idType: "",
      },
      trainOrderBOS: [],//火车票列表
      hotelOrderBOS: [],//酒店列表
      flightOrderBOS: [],//机票列表
      flightChangeRefundOrderBOS: [],//机票改签列表
      
      list: [],
      // 日期时间
      CX: {
        date2: "",
      },
      // 注册表单
      ruleForm: {
        customerSex: "",
        customerName: "",
        custCertificateNo: "",
        birthday: "",
        contractPhoneOne: "",
        expired: "",
        profession: "",
        characterTraits: "",
        jobTitle: "",
        customerPreferences: "",
        nationality: "",
        maritalStatus: "",
        chineseZodiac: "",
        constellation: "",
        contactRequest: "",
        mailingAddress: "",
        wechatId: "",
        language: "",
        countryCitizenship: "",
        hometown: "",
        currentCity: "",
        membershipLevel: "",
        bloodType: "",
        modifyReason: "",
      },
      dialogVisible: false,
      // 表单验证规则
      rules: {
        customerName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        birthday: [
          {
            required: true,
            message: "选择生日",
            trigger: "change",
          },
        ],
        custCertificateNo: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur",
          },
        ],
        contractPhoneOne: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        // expired: [{
        //   required: true,
        //   message: "请选择证件有效期",
        //   trigger: "change"
        // }, ],
        idType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        customerSex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    getregistermethod() {
      this.ruleForm = {};
      this.dialogVisible = true;
    },
    // 注册确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .getqueryCRMCustomerData({
              customerId: "",
              certificateNo: "",
              cardCode: "",
              phone: this.ruleForm.contractPhoneOne,
            })
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                if (res.data.phone == null) {
                  this.getregister();
                } else {
                  this.$message({
                    message:
                      "当前手机号已注册会员，请直接使用或换其他手机号进行注册",
                    type: "warning",
                  });
                }
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 会员注册接口
    getregister() {
      this.$axios.getregister(this.ruleForm).then((res) => {
        // console.log(res);
        if (res.code == "200") {
          this.$message({
            message: "会员注册成功",
            type: "success",
          });
          this.dialogVisible = false;
        }
      });
    },
    // 清空查询条件
    clearForm(valid) {
      this.message.phoneOne = "";
      this.message.phoneTwo = "";
      this.message.customerName = "";
      this.message.customerNo = "";
      this.message.cardCode = "";
      this.message.date = "";
      this.getselectCustomerIdentify();
    },
    getselectCustomerIdentify() {
      console.log(this.message);
      this.$axios
        .getqueryUserDiscern({
          name: this.message.customerName,
          phone: this.message.phoneOne,
          cardNumber: this.message.customerNo,
          vipNumber: this.message.cardCode,
        })
        .then((res) => {
          this.list = [];
          if (res.code == "00000") {
            if (res.data == null) {
              this.$message({
                message: "未查询到用户信息",
                type: "warning",
              });
            } else {
              console.log(res);
              let obj = {
                userName: res.data.userName,
                phoneOne: res.data.phoneOne,
                createTime: res.data.createTime,
                userSex: res.data.userSex,
              };

              this.list.push(obj);
              this.trainOrderBOS = res.data.trainOrderBOS;
              this.hotelOrderBOS = res.data.hotelOrderBOS;
              this.flightOrderBOS = res.data.flightOrderBOS;
              this.flightChangeRefundOrderBOS = res.data.flightChangeRefundOrderBOS;
              
            }
          }
        });
    },

    clickParenttrin() {},
    // 掉飞机接口
    clickParentfight() {
      this.$refs.mychild2.getflightOrderInfoListCRM();
    },
    // 掉酒店接口
    clickParenthotal() {},
    // 掉工单接口
    clickParenWoeker() {
      this.$refs.mychild4.getbackGuaranteeCaseById();
    },
    // 掉工单接口
    clickParentickr() {
      this.$refs.mychild5.getqueryOrderChangeList();
    },
  },
  mounted() {
    // 当前时间
    this.CX.date2 = new Date();
  },
};
</script>

<style scoped>
.passenger {
  height: 100vh;
  background-color: #f7f7f7;
}

.big_box {
  display: flex;
  flex-wrap: wrap;
  max-width: 1247px;
}

.tabsv {
  margin-left: 20px;
}

.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  /* padding-top: 20px;
  margin-left: 20px; */
}

.tuo-1 {
  display: flex;
}

.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}

.table {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.tabs {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
}

.colored {
  color: #f6b23e;
}

.radio {
  margin-top: 5px;
}

.message {
  width: 100%;
  min-width: 1000px;
  background-color: #f7f6f9;
  height: 100vh;
}

.el-form {
  /* display: flex; */
  margin-top: 20px;
  margin-left: 10px;
}

.el-row {
  display: flex;
  justify-content: flex-start;
  margin-left: 20px;
  margin-top: 10px;
}

.el-switch {
  margin-top: 8px;
  margin-left: 15px;
}

.box {
  display: flex;
  margin-left: 20px;
  border: 1px solid #e0e0e0;
  width: 96%;
}
</style>